import { PlusOutlined } from '@ant-design/icons';
import React, { useState, useEffect } from 'react';
import {
    Button,
    Cascader,
    Form,
    Input,
    InputNumber,
    Upload,
    Card
} from 'antd';
import { useNavigate } from "react-router-dom"
import { findCategoryWithProduct } from "../../apis/categoryApi"
import MyUpload from '../../components/MyUpload';

const { TextArea } = Input;

export default function ProductAdd() {
    const navigate = useNavigate()
    const [typeArray, setTypeArray] = useState([])
    const [path,setPath] = useState("")
    const [typeId,setTypeId] = useState("")
    useEffect(() => {
        fetchCategoryDate()
    }, [])
    const fetchCategoryDate = async () => {
        const res = await findCategoryWithProduct()
        console.log(res);
        setTypeArray(res.data.data)
    }
    const back = () => {
        navigate("/home/list")
    }

    const onFinish = (values) => {
        //图片路径
        values.imgSrc = path
        //分类编号
        values.type = typeId
        console.log(values);
    }
    const onFinishFailed = (values) => {
        console.log(values);
    }
    const cascaderChange = (value, value2) => {
        console.log(value);
        console.log(value2);
        setTypeId(value2[1].id)
    }
    const getFilePath = (path)=>{
        setPath(path)
    }
    return (
        <Card
            title={"商品添加"}
            extra={<Button onClick={back} type='dashed'>返回</Button>}
            style={{
                width: "800px",
            }}
        >
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
                style={{
                    maxWidth: 600,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="商品名字"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '名字不能为空',
                        },
                        {
                            min: ""
                        },
                        {
                            max: ""
                        },
                        {
                            // \u4e00-\u9fa5
                            pattern: /[0-9a-zA-Z\u4e00-\u9fa5]{4,}/,
                            message: "必须4个字符"
                        }
                    ]}>
                    <Input placeholder='请输入商品名字' />
                </Form.Item>
                <Form.Item
                    label="商品描述"
                    name="title"
                >
                    <Input placeholder='请输入商品名字' />
                </Form.Item>
                <Form.Item label="商品价格" name="price">
                    <InputNumber />
                </Form.Item>
                <Form.Item label="商品类型" name="type">
                    <Cascader
                        onChange={cascaderChange}
                        options={typeArray}
                    />
                </Form.Item>

                <Form.Item label="商品详情" name="msg">
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item label="商品图片" name="imgSrc">
                    <MyUpload getFilePath={getFilePath}></MyUpload>
                </Form.Item>
                <Form.Item label="">
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>
            </Form>

        </Card>
    )
}
